<template>
  <div class="people" style="padding-bottom: 50px">
    <van-image class="w-100" :src="require('../assets/images/header_bg.png')"></van-image>

    <div class="content_box">
      <van-collapse v-model="activeNames" accordion :border="false">
        <template v-for="(item, index) in menuList">
          <template v-if="index === 0">
            <van-cell center class="link_cell" :key="index" is-link to="/fenju">
              <template slot="icon">
                <van-image style="width: 32px; height: 32px" :src="item.icon"></van-image>
              </template>

              <template slot="title">
                <span style="margin-left: 16px;">{{ item.text }}</span>
              </template>

              <template slot="default">
                <span style="color: #1e8dff;">{{ item.number }}{{ item.unit }}</span>
              </template>
            </van-cell>
          </template>
          
          <template v-else>
            <van-collapse-item :key="index" :name="index">
              <template slot="icon">
                <van-image style="width: 32px; height: 32px" :src="item.icon"></van-image>
              </template>

              <template slot="title">
                <span style="margin-left: 16px">{{ item.text }}</span>
              </template>

              <template slot="value">
                <span style="color: #1e8dff">{{ item.number }}{{ item.unit }}</span>
              </template>

              <div v-if="index==[3]">
                <div style="width: 196px;height: 20px;margin-left: 13px;margin-bottom: 10px;">
                  <span class="span1">自定义查询已登记和未登记数</span>
                </div>

                <div style="margin-left: 12px;display: flex;">
                  <input class="button" v-model="showStart" placeholder="请选择日期" @click="showPopFn()"/>
                  <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
                    <van-datetime-picker
                      v-model="currentDate"
                      type="date"
                      title="选择时间段"
                      :min-date="minDateStart"
                      :max-date="maxDateStart"
                      @confirm="confirmFn()"
                      @cancel="cancelFn()" />
                  </van-popup>

                  <span style="margin-top: 1px;padding: 0 4px;">一</span>

                  <input class="button" v-model="showDate" placeholder="请选择日期" @click="endPopFn()" />

                  <van-popup
                    v-model="end"
                    position="bottom"
                    :style="{height:'40%'}">
                    <van-datetime-picker
                      v-model="endDate"
                      type="date"
                      title="选择时间段"
                      :min-date="minDate"
                      :max-date="maxDate"
                      @confirm="confirmEn()"
                      @cancel="cancelEn()"/>
                  </van-popup>

                  <div style="margin-left: 20px;">
                    <button class="span3" @click="search()">
                      搜索
                    </button>
                  </div>
                </div>
              </div>

              <van-cell v-for="(item2, i2) in item.cell" :key="i2" :title="item2.text" is-link :value="item2.number"/>
            </van-collapse-item>
          </template>
        </template>
      </van-collapse>
    </div>

    <TabBarList :active-tab="1"></TabBarList>
  </div>
</template>

<script>
import TabBarList from '../components/Tabbar'

export default {
  name: 'people',

  components: {
    TabBarList
  },

  data () {
    return {
      menuList: [{
        text: '流动人员总数',
        icon: require('../assets/images/people/icon_1.png'),
        unit: '人',
        number: 3009,
        url: '/fenju'
      },
      {
        text: '群租房统计',
        icon: require('../assets/images/people/icon_2.png'),
        cell: [{
          text: '群租房屋总数',
          number: 66
        },
        {
          text: '群租房间总数',
          number: 66
        },
        {
          text: '已出租房屋数',
          number: 66
        },
        {
          text: '已出租房间数',
          number: 66
        },
        {
          text: '群租房流动人员数',
          number: 66
        }
        ]
      },
      {
        text: '项目统计',
        icon: require('../assets/images/people/icon_3.png'),
        cell: [{
          text: '项目登记数',
          number: 66
        },
        {
          text: '务工登记人数',
          number: 66
        }
        ]
      },
      {
        text: '网约房统计',
        icon: require('../assets/images/people/icon_4.png'),
        cell: [{
          text: '已登记数',
          number: 66
        },
        {
          text: '未登记数',
          number: 66
        },
        {
          text: '入住已登记',
          number: 66
        },
        {
          text: '入住未登记',
          number: 66
        },
        {
          text: '平台登记的网约房数',
          number: 66
        },
        {
          text: '绑定设备的网约房数',
          number: 66
        }
        ]
      },
      {
        text: '出租房统计',
        icon: require('../assets/images/people/icon_5.png'),
        cell: [{
          text: '出租房房屋总数',
          number: 66
        },
        {
          text: '出租房房间总数',
          number: 66
        },
        {
          text: '已出租房屋数',
          number: 66
        },
        {
          text: '已出租房间数',
          number: 66
        },
        {
          text: '出租房流动人员数',
          number: 66
        }
        ]
      }
      ],
      activeNames: [],
      currentDate: new Date(),
      endDate: new Date(),
      show: false, // 用来显示弹出层
      end: false,
      showStart: '',
      showDate: '',
      minDateStart: new Date(2017, 12, 1), // 开始时间最小值
      maxDateStart: new Date(), // 开始时间最大当前时间
      minDate: new Date(), // 最小时间必须》开始的最大时间maxDateStart
      maxDate: new Date() // 最小时间最大当前时间
    }
  },

  methods: {
    link (index, url) {
      if (index == 0) {
        this.$router.push(url)
      }
    },
    // 开始时间
    showPopFn () {
      this.show = true
    },
    confirmFn () {
      // 确定按钮
      this.showStart = this.timeFormat(this.currentDate)
      this.show = false
    },
    cancelFn () {
      this.show = false
    },

    // 结束时间
    endPopFn () {
      // 设置结束时间的最小
      this.end = true
      if (this.showStart == '') {
        this.minDate = new Date(2017, 12, 1)
        this.maxDate = new Date()
      } else {
        this.minDate = new Date(this.showStart)
      }
    },
    confirmEn () { // 确定按钮
      this.showDate = this.timeFormat(this.endDate)
      this.maxDateStart = this.endDate
      this.end = false
    },
    cancelEn () {
      this.end = false
    },

    timeFormat (time = new Date()) { // 时间格式化
      const year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      return year + '-' + month + '-' + day
    },
    // 搜索
    search () {

    }
  },
  mounted () {
    this.timeFormat(new Date())
  }

}
</script>

<style scoped lang="less">
.content_box {
  width: 100vw;
}
</style>

<style>
.people .van-collapse {
  margin: 0 15px;
}

.people .van-collapse-item, .link_cell {
  margin: 16px 0;
  text-align: left;
}

.van-collapse-item .van-cell {
  display: flex;
  align-items: center;
}

.van-cell__title {
  width: 56px;
  height: 20px;
  font-size: 14px;
  color: #333333;
  line-height: 20px;

}

.van-cell__value {
  width: 24px;
  height: 28px;
  font-size: 14px;
  color: #1E8DFF;
  line-height: 28px;
}
 .van-icon-arrow .i:first-child{
   line-height:32px;
 }
.van-icon-arrow {
  color: #0081FF;
}

.van-collapse-item__title--expanded::after {
  display: none;
}

.van-cell.van-cell--clickable.van-collapse-item__title {
  box-shadow: 0 7px 8px -4px #CEE6FF;
}

.button {
  width: 78px;
  height: 15px;
  border-radius: 12px;
  border: 1px solid #EDEDED;
  text-align: center;
}

.span1 {
  width: 196px;
  height: 20px;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}

.span3 {
  width: 45px;
  height: 20px;
  background: #1E8DFF;
  border-radius: 12px;
  border: 1px solid #D0EDED;
  font-size: 12px;
  color: #D0EDED;
}
</style>
